<template>
    <view class='page'>
        <headerline navstyle="left:25%;width:50%;" :reditem='unreadnum' :isback="true" :shownav="true"
            :navitem="navitem" :navselect="navselect" @tapnav="tapnav" :statusbarheight='statusBarHeight'
            :islogo="false"></headerline>

        <block v-if="isloading==false" >
            <block v-if="navselect==0">
                <block v-if="friend_lists.length>0">

                    <block v-for="(m,index) in friend_lists" :key='index'>
                        <view style="box-shadow: 0 3rpx 3rpx #e1e1e1;display: flex;justify-content: space-between; align-items: center;">
                            <view  style="padding:  20rpx 25rpx;display: flex; align-items: center;">
                                <image style="width: 80rpx;height: 80rpx;border-radius: 15rpx;" @tap='openuser(m.user)' :src="image_cache(m.user.avatar)" ></image>
                                <view style="display: flex;justify-content: space-between;">
                                    <view style="margin-left: 15rpx;">
                                        <span style="color: #007aff;margin-right: 10rpx;" @tap='openuser(m.user)'>{{m.user.nickname}}</span>申请添加您为好友
                                        <view style="font-size: 24rpx;color: #888;display: flex;align-items: center;">备注:
                                            <view v-for="(m1,index1) in m.mark" :key='index1' class="mark">
                                                {{m1}}
                                            </view>
                                        </view>
                                    </view>
                                    
                                </view>
                            </view>
                            <view v-if="m.status==0" style="width: 140rpx;padding-right: 20rpx; display: flex;justify-content: space-between; align-items: center;">
                                <text style="color:red"  @tap="deal_userapply(m.id,2,index)">拒绝</text>
                                <text  style="color:#007aff" @tap="deal_userapply(m.id,1,index)">同意</text>
                            </view>
                            <view v-else style="color:#666;font-size: 13px;padding-right: 20rpx;">
                                <block v-if="m.status==1">
                                    <uni-icons type='checkmarkempty' style="color:#007aff"></uni-icons>
                                    已添加</block>
                                <block v-else>
                                    <uni-icons type='closeempty' color="red"></uni-icons>
                                    已拒绝
                                </block>
                                <view>
                                    {{timestampFormat(m.addtime)}}
                                </view>
                            </view>
                        </view>
                    </block>
                </block>
                <view class="nodata" v-else>
                    暂无好友验证消息
                </view>
            </block>
            <block v-else>
                <block v-if="group_lists.length>0">
                    <block v-for="(m,index) in group_lists" :key='index'>
                        <view class="times">{{timestampFormat(m.addtime)}}</view>
                        <view class="lines">
                            <view>
                                <image @tap='openuser(m.user)' :src="image_cache(m.user.avatar)" class="avatar"></image>
                            </view>
                            <view>
                                <view>
                                    <span class='nickname' @tap='openuser(m.user)'>{{m.user.nickname}}</span>申请加入<span
                                        class='nickname' @tap='opengroup(m.group)'>{{m.group.nickname}}</span>
                                </view>
                                <scroll-view scroll-y="true" :scroll-top="m.content1.length*20"
                                    v-if="m.content1.length>0" style="max-height:32px;">
                                    <view v-for="(m1,index1) in m.content1" :key='index1' class="mark">
                                        {{m1}}

                                    </view>
                                </scroll-view>
                                <view v-if="m.status==0">

                                    <button class="btns ok" @tap="deal_apply(m.id,1,index)">
                                        <uni-icons type='checkmarkempty' style="color:#FFF"></uni-icons>
                                        同意</button>
                                    <button class="btns clear" @tap="deal_apply(m.id,2,index)">
                                        <uni-icons type='closeempty'></uni-icons>拒绝</button>


                                </view>
                                <view v-else style="color:#666;font-size: 14px;">
                                    <block v-if="m.apply_uid!=userid">其他人</block>
                                    <block v-if="m.status==1">已同意</block>
                                    <block v-else>已拒绝</block>
                                </view>
                            </view>
                        </view>
                    </block>
                </block>
                <view class="nodata" v-else>
                    暂无群组验证消息
                </view>
            </block>
        </block>

        <view class="loading" v-else style="padding-top: 70px;">
            <view class="spinner">
                <view class="rect1"></view>
                <view class="rect2"></view>
                <view class="rect3"></view>
                <view class="rect4"></view>
                <view class="rect5"></view>
            </view>
        </view>
        <layer v-if="showlayer" title="确定要拒绝申请？" placeholder="请输入拒绝理由" isradio=true radiotext="同时设置为黑名单" btn_ok="确认"
            @close="showlayer=false;" @sub="layer_sub"></layer>

    </view>
</template>

<script>
    import api from "../../library/index.js"
    import http from "../../library/http.js"
    import config from "../../config.js"
    import uniIcons from '../../components/uni-icons/uni-icons.vue'
    import headerline from '../../components/header.vue'
    import layer from '../../components/layer.vue'
    var windowHeight = uni.getSystemInfoSync().windowHeight;
    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    var contenttop = statusBarHeight + 45;
    var conentheight = windowHeight - contenttop;
    var lottHeight = conentheight - 30;
    var lottTop = contenttop + 30;
    export default {
        components: {
            uniIcons,
            headerline,
            layer
        },
        data() {
            return {
                statusBarHeight: statusBarHeight + 'px',
                contenttop: contenttop + 'px',
                contentheight: conentheight + 'px',
                lottHeight: lottHeight + 'px',
                lottTop: lottTop + 'px',
                shownav: true,
                navitem: ['好友', '群组'],
                navselect: 0,
                system: uni.getStorageSync('system'),

                userid: uni.getStorageSync('access_token'),
                user: uni.getStorageSync('userInfo'),
                group_lists: uni.getStorageSync('group_applylist'),
                friend_lists: uni.getStorageSync('friend_applylist'),
                isloading: true,
                page: 1,
                showlayer: false,
                senddata: {},
                index: 0,
                applytype: 'friend',
                unreadnum: [0, 0],
                num1: 0,
                num2: 0,

            }
        },
        methods: {
            timestampFormat(timestamp) {
                let curTimestamp = parseInt(new Date().getTime() / 1000), //当前时间戳
                    timestampDiff = curTimestamp - timestamp, // 参数时间戳与当前时间戳相差秒数
                    curDate = new Date(curTimestamp * 1000), // 当前时间日期对象
                    tmDate = new Date(timestamp * 1000), // 参数时间戳转换成的日期对象
                    Y = tmDate.getFullYear(),
                    m = tmDate.getMonth() + 1,
                    d = tmDate.getDate(),
                    H = tmDate.getHours(),
                    i = tmDate.getMinutes(),
                    s = tmDate.getSeconds();
                if (timestampDiff < 60) { // 一分钟以内
                    return "刚刚";
                } else if (timestampDiff < 3600) { // 一小时前之内
                    return Math.floor(timestampDiff / 60) + "分钟前";
                } else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
                    return '今天 ' + ((String(H).length == 1 ? '0' : '') + H) + ':' + ((String(i).length == 1 ? '0' :
                        '') + i);
                } else {
                    var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
                    if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
                        return '昨天 ' + ((String(H).length == 1 ? '0' : '') + H) + ':' + ((String(i).length == 1 ? '0' :
                            '') + i);
                    } else if (curDate.getFullYear() == Y) {
                        return ((String(m).length == 1 ? '0' : '') + m) + '月' + ((String(d).length == 1 ? '0' : '') +
                            d) + '日 ' + ((String(H).length == 1 ? '0' : '') + H) + ':' + ((String(i).length == 1 ?
                            '0' :
                            '') + i);
                    } else {
                        return Y + '年' + ((String(m).length == 1 ? '0' : '') + m) + '月' + ((String(d).length == 1 ?
                            '0' : '') + d) + '日 ' + ((String(H).length == 1 ? '0' : '') + H) + ':' + ((String(i)
                            .length == 1 ? '0' : '') + i);
                    }
                }
            },
            openuser(m) {
                this.$jump('friend.detail', m);
            },
            opengroup(m) {
                this.$jump('group.detail', m);
            },
            layer_sub(e) {

                var data = this.senddata;

                if (this.applytype == 'group') {
                    data['apply'] = e;
                    this.$socket.send(data);
                    this.group_lists[this.index].status = this.senddata.status;
                    this.group_lists[this.index].apply_uid = this.user.id;
                    this.showlayer = false;
                } else {
                    this.friend_lists[this.index].status = this.senddata.status;
                    data['apply'] = JSON.stringify(e);
                    http.setWait(false).post('user.php?act=handleFriendApply', data).then(res => {
                        if (res.code == 200) {
                            this.getFriendData();
                            this.showlayer = false;
                        } else {
                            uni.showToast({
                                title: '网络错误，请稍后再试',
                                icon: 'none'
                            })
                        }


                    })



                }


            },
            deal_apply(applyid, status, index) {
                if (status == 1) {

                    this.senddata = {
                        type: 'deal_group_apply',
                        userid: this.user.id,
                        applyid: applyid,
                        status: status
                    }
                    this.index = index;
                    this.$socket.send(this.senddata);
                    this.group_lists[this.index].status = this.senddata.status;
                    this.group_lists[this.index].apply_uid = this.user.id;

                } else {
                    this.showlayer = true;
                    this.senddata = {
                        type: 'deal_group_apply',
                        userid: this.user.id,
                        applyid: applyid,
                        status: status
                    }
                    this.index = index;
                    this.applytype = 'group';
                }



            },

            deal_userapply(applyid, status, index) {

                if (status == 1) {

                    this.friend_lists[index].status = status;

                    http.setWait(false).post('user.php?act=handleFriendApply', {
                        userid: this.user.id,
                        id: applyid,
                        status: status
                    }).then(res => {
                        if (res.code == 200) {
                            this.getFriendData();

                        } else {
                            uni.showToast({
                                title: '网络错误，请稍后再试',
                                icon: 'none'
                            })
                        }


                    })

                } else {
                    this.showlayer = true;
                    this.senddata = {
                        userid: this.user.id,
                        id: applyid,
                        status: status
                    };
                    this.index = index;
                    this.applytype = 'friend';
                }


            },
            tapnav(e) {
                this.navselect = e;
                this.page = 1;
                if (e == 1) this.getGroupData();
                else this.getFriendData();
            },
            getFriendData() {

                try {
                    if (this.friend_lists.length > 0)
                        this.isloading = false;
                    else
                        this.isloading = true;
                } catch (e) {
                    //TODO handle the exception
                    this.isloading = true;
                }


                http.setWait(false).get('user.php?act=getFriendApply', {
                    userid: this.user.id,
                    page: this.page
                }).then(res => {
                    if (res.code == 200) {
                        this.isloading = false;

                        if (this.page == 1) {
                            this.friend_lists = res.data;
                            uni.setStorageSync('friend_applylist', res.data);
                            var num = 0;
                            for (var i = 0; i < res.data.length; i++) {
                                var item = res.data[i];
                                if (item.status == 0) {
                                    num = 1;
                                    break;
                                }
                            }
                            this.setunread(0, num);
                        } else {
                            this.friend_lists.push(...res.data)
                            this.page++;
                        }

                    } else {
                        uni.showToast({
                            title: '网络错误，请稍后再试',
                            icon: 'none'
                        })
                    }


                })

            },

            setunread(index, num) {
                if (index == 0) this.num1 = num;
                else this.num2 = num;

                this.unreadnum.splice(0, 2);
                this.unreadnum.push(this.num1);
                this.unreadnum.push(this.num2);
                this.$forceUpdate();
            },
            getGroupData() {
                try {
                    if (this.group_lists.length > 0)
                        this.isloading = false;
                    else
                        this.isloading = true;
                } catch (e) {
                    //TODO handle the exception
                    this.isloading = true;
                }

                http.setWait(false).get('group.php?act=applylist', {
                    userid: this.user.id,
                    page: this.page
                }).then(res => {
                    if (res.code == 200) {
                        this.isloading = false;
                        if (this.page == 1) {
                            this.group_lists = res.data;
                            uni.setStorageSync('group_applylist', res.data);
                            var num = 0;
                            for (var i = 0; i < res.data.length; i++) {
                                var item = res.data[i];
                                if (item.status == 0) {
                                    num = 1;
                                    break;
                                }
                            }
                            this.setunread(1, num);

                        } else {
                            this.group_lists.push(...res.data);
                            this.page++;
                        }

                    } else {
                        uni.showToast({
                            title: '网络错误，请稍后再试',
                            icon: 'none'
                        })
                    }


                })

            }

        },
        onReachBottom() {
            if (this.page == 1) this.page++;
            if (this.navselect == 1) this.getGroupData();
            else this.getFriendData();
        },

        onPullDownRefresh() {
            this.page = 1;
            if (this.navselect == 1) this.getGroupData();
            else this.getFriendData();
        },

        onLoad(opts) {
            if (opts.type == 'group') this.navselect = 1;
            else this.navselect = 0;



            this.getGroupData();
            this.getFriendData();
            this.$socket.on('deal_response', (res) => {

                uni.showToast({
                    title: res.data.message,
                    icon: 'none'
                })
                this.page = 1;
                if (this.navselect == 1) this.getGroupData();
                else this.getFriendData();


            })
        },
        onUnload() {
            this.$socket.off('deal_response')
        }


    }
</script>

<style lang="scss">
    @import "@/static/css/group.css";

    .page {
        background-color: #FAFAFA;
    }

    .nodata {
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #666;
    }

    .lines {
        margin: 0px auto;
        background-color: #FFF;
        padding: 5px 0px;
        width: 100%;
        display: table;
        table-layout: fixed;
    }

    .lines>view {
        display: table-cell;
    }

    .lines>view:first-child {
        width: 60px;
        text-align: right;
    }

    .lines>view:nth-child(2) {

        text-align: left;
        padding-left: 10px;
        ;
        line-height: 20px;
        vertical-align: top;
    }

    .lines .avatar {
        height: 40px;
        width: 40px;
        border-radius: 5px;
        vertical-align: middle;
    }

    .lines .nickname {
        color: #398fff;
        display: inline-block;
    }

    .lines .btns {
        padding: 0px 10px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 5px;
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 20px;
    }

    .lines .btns.clear {
        border: 1px solid #666;
        color: #666;
        background-color: #fff;

    }

    .lines .btns.ok {
        background: -webkit-linear-gradient(left top, #3388ff, #398fff);
        background: -o-linear-gradient(bottom right, #3388ff, #398fff);
        background: -moz-linear-gradient(bottom right, #3388ff, #398fff);
        background: linear-gradient(to bottom right, #3388ff, #398fff);
        color: #fff;
    }

    .lines .mark {
        color: #666;
        font-size: 12px;
        ;
        height: 16px;
        line-height: 16px;
        ;
    }

    .times {
        height: 25px;
        line-height: 25px;
        text-align: center;
        color: #999;
        font-size: 12px;
    }

    .loading {
        //loading动画
        display: flex;
        justify-content: center;

        @keyframes stretchdelay {

            0%,
            40%,
            100% {
                transform: scaleY(0.6);
            }

            20% {
                transform: scaleY(1.0);
            }
        }

        .spinner {
            margin: 20upx 0;
            width: 60upx;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            view {
                background-color: #ff9800;
                height: 25px;
                width: 3px;
                border-radius: 3px;
                animation: stretchdelay 1.2s infinite ease-in-out;
            }

            .rect2 {
                animation-delay: -1.1s;
            }

            .rect3 {
                animation-delay: -1.0s;
            }

            .rect4 {
                animation-delay: -0.9s;
            }

            .rect5 {
                animation-delay: -0.8s;
            }
        }
    }
</style>